<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div id="app">
    <h1 v-for="item in info.food">{{item.name}}</h1>
</div>

<!--cdn-->
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        // 和mounted中response里的东西相关联
        data(){
            return{
                // 请求的返回格式参数必须和返回的json格式相同
                info: {
                    food: [
                        {
                            name: null,
                            price: null
                        }
                    ]
                }
            }
        },
        mounted(){
            axios.get("test.json")
            // es6的新特性response
            .then(response=>(
                console.log(this.info=response.data)
            ))
        }
    });
</script>
</body>
</html>